import styles from "@styles/personal.module.less";
import Header from "@shared/header";
import GeekIcon from "@shared/geekIcon";
import React, { useState } from "react";
import { SlideRef } from "@shared/slide";
import { useUpdateProfileMutation } from "@service/userEndpoints";
import toast from "react-hot-toast";

interface Props {
  name: string;
  slideRef: React.RefObject<SlideRef>;
}

export default function UpdateNickname({ name, slideRef }: Props) {
  // 获取修改用户资料的方法
  const [updateProfile] = useUpdateProfileMutation();
  // 用于存储用户输入的昵称
  const [nickname, setNickname] = useState(name);
  // 更新昵称
  const updateNickname = () => {
    updateProfile({ name: nickname })
      .unwrap()
      .then(() => {
        toast.success("昵称更新成功");
        slideRef.current?.close();
      });
  };

  return (
    <div className={styles.content}>
      <Header
        title={"编辑昵称"}
        left={<GeekIcon type={"iconfanhui"} className={styles.icon} />}
        right={
          <button onClick={updateNickname} className={styles.submit}>
            提交
          </button>
        }
      />
      <form>
        <input
          className={styles.input}
          type="text"
          value={nickname}
          onChange={(event) => setNickname(event.target.value)}
          autoFocus
        />
      </form>
    </div>
  );
}
